<template>
    <div class="app-container">
        <el-form ref="form" :model="formData" label-width="200px">
          <el-form-item label="是否每日领取">
            <el-switch
                style="display: block; margin-top: 5px;"
                v-model="formData.everyRed"
                :active-value="1"
                :inactive-value="0"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="用户红包次数">
            <el-input type="number" v-model="formData.redNumber" placeholder="请输入用户红包次数"></el-input>
            <span style="color: red;">-1表示不限红包次数</span>
          </el-form-item>
          <el-form-item label="红包发送者">
            <el-input v-model="formData.sendName" placeholder="请输入红包发送者"></el-input>
          </el-form-item>
          <el-form-item label="祝福语">
            <el-input v-model="formData.wishing" placeholder="请输入祝福语"></el-input>
          </el-form-item>
          <el-form-item label="红包发放规则">
            <el-button style="margin-top: 5px;" type="primary" size="small" class="filter-item" icon="plus" @click="addItem()">添加</el-button>
            <el-divider content-position="left"><label style="color:red;">每个红包的平均金额必须在1.00元到499.00元之间。</label></el-divider>
            <el-table :data="dataList" table-layout="auto">
              <el-table-column prop="priority" label="优先级">
                <template #default="{ row }">
                  <el-input type="number" v-model="row.priority" placeholder="请输入优先级"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="number" label="正确数量">
                <template #default="{ row }">
                  <el-input
                      type="number"
                      v-model="row.number"
                      placeholder="请输入正确数量"
                  >
                    <template #prepend>>=</template>
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="money" label="红包金额">
                <template #default="{ row }">
                  <el-input type="number" v-model="row.money" placeholder="请输入红包金额"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" fixed="right">
                <template #default="scope">
                  <el-button type="danger" size="small" class="filter-item" @click="delItem(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-button type="success" @click="toSave()">保存配置</el-button>
        </el-form>
    </div>
</template>


<script setup>
    import { ref,getCurrentInstance} from 'vue'
    import {get, post} from "@/utils/request";
    import {ElMessage} from "element-plus";

    const {proxy} = getCurrentInstance();

    const formData = ref({
      everyRed: 0,
      redNumber: 0,
      sendName: '',
      wishing: '',
    })

    const dataList = ref([])

    const addItem = () => {
      dataList.value.push({
        priority: '',
        number: '',
        money: '',
      })
    }
    const delItem = (index) => {
      dataList.value.splice(index, 1); // 删除数组中的指定项
    }

    const initData = () => {
      get('/configuration/information').then(res=>{
        if (res) {
          formData.value = res
        }
      })
      get('/configurationItem/list').then(res=>{
        if (res) {
          dataList.value = res
        }
      })
    }
    initData()
    const toSave = () => {
      if( dataList.value.length <= 0 ){
        ElMessage({
          message: '产品信息不完整',
          type: 'error'
        });
        return;
      }
      for (let element of dataList.value) {
        const number = element.number;
        if( ''===number || undefined===number || parseInt(number) <= 0 ){
          ElMessage({
            message: '数量信息不正确',
            type: 'error'
          });
          return;
        }

        const priority = element.priority;
        if( ''===priority || undefined===priority || parseInt(priority) <= 0 ){
          ElMessage({
            message: '优先级信息不正确',
            type: 'error'
          });
          return;
        }

        const money = element.money;
        if( ''===money || undefined===money || parseInt(money) <= 0 ){
          ElMessage({
            message: '红包金额不正确',
            type: 'error'
          });
          return;
        }
      }
      var param = {
        detail:formData.value,
        items:dataList.value
      }
      post('/configurationItem/save',param).then(res=>{
        if (res) {
          ElMessage({
            message: '配置成功',
            type: 'success'
          });
        }
      })
    }
</script>
